<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">{{ 'status.widget.title_manage_widget' | translate }}</h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="dismissModal()"
    ></button>
  </div>
  <div class="modal-body">
    <ul class="list-group list-group-box mb-0">
      <li class="list-group-item d-flex justify-content-between align-items-center flex-row pb-2">
        <span class="text-start">{{ 'status.widget.hide_on_mobile' | translate }}</span>
        <div class="text-end grey-text d-flex align-items-center">
          <input
            type="checkbox"
            class="rendux-input"
            id="hideOnMobile"
            [(ngModel)]="widget.hideOnMobile"
            [attr.aria-label]="'status.widget.hide_on_mobile' | translate"
          />
          <label for="hideOnMobile" class="rendux-label ms-3"></label>
        </div>
      </li>
      @switch (widget.component) { @case ('UpdateInfoWidgetComponent') {
      <li class="list-group-item d-flex justify-content-between align-items-center flex-row pb-2">
        <span class="text-start">{{ 'status.widget.hide_node_info' | translate }}</span>
        <div class="text-end grey-text d-flex align-items-center">
          <input
            type="checkbox"
            class="rendux-input"
            id="hideNodeInfo"
            [(ngModel)]="widget.hideNodeInfo"
            [attr.aria-label]="'status.widget.hide_node_info' | translate"
          />
          <label for="hideNodeInfo" class="rendux-label ms-3"></label>
        </div>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center flex-row pb-2">
        <span class="text-start">{{ 'status.widget.hide_npm' | translate }}</span>
        <div class="text-end grey-text d-flex align-items-center">
          <input
            type="checkbox"
            class="rendux-input"
            id="showNpmVersion"
            [(ngModel)]="widget.showNpmVersion"
            [attr.aria-label]="'status.widget.hide_npm' | translate"
          />
          <label for="showNpmVersion" class="rendux-label ms-3"></label>
        </div>
      </li>
      @if (serverInfo && serverInfo.homebridgeRunningInDocker) {
      <li class="list-group-item d-flex justify-content-between align-items-center flex-row pb-2">
        <span class="text-start">{{ 'status.widget.expand_docker' | translate }}</span>
        <div class="text-end grey-text d-flex align-items-center">
          <input
            type="checkbox"
            class="rendux-input"
            id="dockerExpanded"
            [(ngModel)]="widget.dockerExpanded"
            [attr.aria-label]="'status.widget.expand_docker' | translate"
          />
          <label for="dockerExpanded" class="rendux-label ms-3"></label>
        </div>
      </li>
      } } @case ('WeatherWidgetComponent') {
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label for="city-search-input" class="mb-2 mb-md-0 w-100 w-md-50">
          {{ 'status.widget.weather.label_search_for_your_city' | translate }}
        </label>
        <div class="text-start text-md-end w-100 w-md-50">
          <div class="input-group">
            <span class="input-group-text custom-input" id="">
              <i class="fas" [ngClass]="{ 'fa-sync fa-spin': searching, 'fa-city': !searching }"></i>
            </span>
            <input
              id="city-search-input"
              type="text"
              class="form-control custom-input"
              [ngbTypeahead]="searchCountryCodes"
              [resultFormatter]="searchCountryCodeFormatter"
              [inputFormatter]="searchCountryCodeFormatter"
              [editable]="false"
              [(ngModel)]="widget.location"
            />
          </div>
        </div>
      </li>
      <li class="list-group-item muted grey-text text-center">Weather data is provided by OpenWeather.</li>
      } @case ('HomebridgeLogsWidgetComponent') {
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'status.widget.font_size' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50">
          <select class="custom-select" [(ngModel)]="widget.fontSize">
            @for (size of fontSizes; track size) {
            <option [value]="size">{{ size }}</option>
            }
          </select>
        </div>
      </li>
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'status.widget.font_weight' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50">
          <select class="custom-select" [(ngModel)]="widget.fontWeight">
            @for (weight of fontWeights; track weight) {
            <option [value]="weight">{{ weight }}</option>
            }
          </select>
        </div>
      </li>
      @if (this.isLightMode) {
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'settings.display.lighting_mode' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50">
          <select class="custom-select" [(ngModel)]="widget.theme">
            <option value="dark">{{ 'settings.display.dark' | translate }}</option>
            <option value="light">{{ 'settings.display.light' | translate }}</option>
          </select>
        </div>
      </li>
      } } @case ('TerminalWidgetComponent') {
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'status.widget.font_size' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50">
          <select class="custom-select" [(ngModel)]="widget.fontSize">
            @for (size of fontSizes; track size) {
            <option [value]="size">{{ size }}</option>
            }
          </select>
        </div>
      </li>
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'status.widget.font_weight' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50">
          <select class="custom-select" [(ngModel)]="widget.fontWeight">
            @for (weight of fontWeights; track weight) {
            <option [value]="weight">{{ weight }}</option>
            }
          </select>
        </div>
      </li>
      @if (this.isLightMode) {
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'settings.display.lighting_mode' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50">
          <select class="custom-select" [(ngModel)]="widget.theme">
            <option value="dark">{{ 'settings.display.dark' | translate }}</option>
            <option value="light">{{ 'settings.display.light' | translate }}</option>
          </select>
        </div>
      </li>
      } } @case ('ClockWidgetComponent') {
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'status.widget.clock_timeformat' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50">
          <select class="custom-select" [(ngModel)]="widget.timeFormat">
            @for (timeFormat of timeFormats; track timeFormat) {
            <option [value]="timeFormat">{{ currentDate | date:timeFormat }}</option>
            }
          </select>
        </div>
      </li>
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'status.widget.clock_dateformat' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50">
          <select class="custom-select" [(ngModel)]="widget.dateFormat">
            @for (dateFormat of dateFormats; track dateFormat) {
            <option [value]="dateFormat">{{ currentDate | date:dateFormat }}</option>
            }
          </select>
        </div>
      </li>
      } @case ('CpuWidgetComponent') {
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'status.widget.network.refresh_interval' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50">
          <div class="input-group">
            <input
              type="number"
              class="form-control custom-input"
              [(ngModel)]="widget.refreshInterval"
              min="1"
              max="60"
            />
            <span class="input-group-text custom-input">{{ 'status.widget.network.seconds' | translate }}</span>
          </div>
        </div>
      </li>
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'status.widget.network.history_items' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50">
          <div class="input-group">
            <input type="number" class="form-control custom-input" [(ngModel)]="widget.historyItems" min="1" max="60" />
            <span class="input-group-text custom-input">{{ 'status.widget.network.items' | translate }}</span>
          </div>
        </div>
      </li>
      } @case ('MemoryWidgetComponent') {
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'status.widget.network.refresh_interval' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50">
          <div class="input-group">
            <input
              type="number"
              class="form-control custom-input"
              [(ngModel)]="widget.refreshInterval"
              min="1"
              max="60"
            />
            <span class="input-group-text custom-input">{{ 'status.widget.network.seconds' | translate }}</span>
          </div>
        </div>
      </li>
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'status.widget.network.history_items' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50">
          <div class="input-group">
            <input type="number" class="form-control custom-input" [(ngModel)]="widget.historyItems" min="1" max="60" />
            <span class="input-group-text custom-input">{{ 'status.widget.network.items' | translate }}</span>
          </div>
        </div>
      </li>
      } @case ('NetworkWidgetComponent') {
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'status.widget.network.network_interface' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50">
          @if (networkInterfaces.length) {
          <select class="custom-select" [(ngModel)]="widget.networkInterface">
            @for (networkInterface of networkInterfaces; track networkInterface) {
            <option [value]="networkInterface">{{ networkInterface }}</option>
            }
          </select>
          } @if (!networkInterfaces.length) {
          <span class="grey-text">{{ 'status.widget.network.none_selected' | translate }}</span> }
        </div>
      </li>
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'status.widget.network.refresh_interval' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50">
          <div class="input-group">
            <input
              type="number"
              class="form-control custom-input"
              [(ngModel)]="widget.refreshInterval"
              min="1"
              max="60"
            />
            <span class="input-group-text custom-input">{{ 'status.widget.network.seconds' | translate }}</span>
          </div>
        </div>
      </li>
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'status.widget.network.history_items' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50">
          <div class="input-group">
            <input type="number" class="form-control custom-input" [(ngModel)]="widget.historyItems" min="1" max="60" />
            <span class="input-group-text custom-input">{{ 'status.widget.network.items' | translate }}</span>
          </div>
        </div>
      </li>
      } }
    </ul>
  </div>
  <div class="modal-footer justify-content-between">
    <div class="text-start">
      <button
        type="button"
        class="btn btn-elegant"
        data-bs-dismiss="modal"
        (click)="dismissModal()"
        [attr.aria-label]="'form.button_close' | translate"
      >
        {{ 'form.button_close' | translate }}
      </button>
    </div>
    <div class="text-center"></div>
    <div class="text-end">
      <button type="button" class="btn btn-primary" data-bs-dismiss="modal" (click)="closeModal()">
        {{ 'form.button_save' | translate }}
      </button>
    </div>
  </div>
</div>
